<!--图片预览-->
<template>
  <div>
    <a-modal
      v-model="previewShow"
      :destroyOnClose="true"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="imgBox">
        <img ref="imgShow" v-if="imgUrl" :v-lazy="imgUrl" :src="imgUrl" :class="isHeight ? 'hovImg' : 'verImg'" alt="预览图">
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "picturePreview",
  data(){
    return{
      previewShow: false,
      imgUrl: null,
      isHeight: false
    }
  },
  props: ['url','isShow'],
  watch:{
    isShow:{  // 监控该变量，重新赋值并刷新图表
      handler(newVal, oldVal){
        this.previewShow = newVal
      }
    },
    url: {
      handler(newVal, oldVal){
        if (newVal){
          this.previewShow = false;
          this.imgUrl = newVal;
        }
      }
    }
  },
  mounted() {
    //子接收父传值
    if (this.url){
      this.imgUrl = this.url;
    }
    if (this.isShow){
      this.previewShow = this.isShow;
    }
  },
  methods:{
    //关闭
    handleCancel(){
      this.$emit('modalHidden');
    },
  }
}
</script>

<style scoped lang="less">
.imgBox{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.hovImg{
  width: 100%;
  height: auto;
}
.verImg{
  width: 100%;
  height: 100%;
}
</style>
